body{
  margin: 0;
}

.homepod-section{
  .homepod-container{
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: -1;
    .homepod{
      width: 654px;
      height: 825px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      >div{
        width: inherit;
        height: inherit;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        &.device{
          background-image: url(../img/homepod_side__brlxkl4gtrf6_large.jpg);
        }
        &.part-1{
          background-image: url(../img/guts_1__ddez8kzp4omu_large.jpg);
          opacity: var(--part-1);
        }
        &.part-2{
          background-image: url(../img/guts_2__cnol9djca7bm_large.jpg);
          opacity: var(--part-2);
        }
        &.part-3{
          background-image: url(../img/guts_3__k9w71kkilbuy_large.jpg);
          opacity: var(--part-3);
        }
        &.part-4{
          background-image: url(../img/guts_4__dfs8aga4geoi_large.jpg);
          opacity: var(--part-4);
        }
        &.ending{
          background-image: url(../img/homepod_side__brlxkl4gtrf6_large.jpg);
          opacity: var(--ending);
        }
      }
    }
  }
  .desc-container{
    padding-bottom: 100vh;
    .desc{
      margin: 0 auto 100vh;
      padding: 80px 50px;
      border-radius: 20px;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      width: 480px;
      line-height: 1.5;
    }
    :last-child{
      margin-bottom: 0;
    }
  }
}

.other-section{
  height: 1000px;
  background-color: #999;
}
